<template>
  <div class="mint-container">
    <el-card class="mint-card">
      <template #header>
        <h2>🎨 铸造 NFT</h2>
      </template>

      <el-form :model="form" label-width="120px">
        <el-form-item label="NFT 名称">
          <el-input v-model="form.name" placeholder="输入 NFT 名称" />
        </el-form-item>

        <el-form-item label="描述">
          <el-input 
            v-model="form.description" 
            type="textarea" 
            :rows="4"
            placeholder="输入 NFT 描述"
          />
        </el-form-item>

        <el-form-item label="图片 URL">
          <el-input 
            v-model="form.image" 
            placeholder="输入图片 URL 或 IPFS 哈希"
          />
        </el-form-item>

        <el-form-item label="版税比例">
          <el-input-number 
            v-model="form.royalty" 
            :min="0" 
            :max="20" 
            :step="1"
          />
          <span style="margin-left: 10px; color: #909399">%</span>
        </el-form-item>

        <el-form-item label="预览">
          <div v-if="form.image" class="preview-box">
            <img :src="form.image" alt="NFT Preview" class="preview-image" />
          </div>
          <div v-else class="preview-placeholder">
            暂无预览
          </div>
        </el-form-item>

        <el-form-item>
          <el-button 
            type="primary" 
            @click="handleMint" 
            :loading="minting"
            :disabled="!canMint"
            size="large"
          >
            {{ minting ? '铸造中...' : '铸造 NFT' }}
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="info-card" v-if="mintedNFT">
      <template #header>
        <h3>✅ 铸造成功!</h3>
      </template>
      <el-descriptions :column="1" border>
        <el-descriptions-item label="Token ID">
          {{ mintedNFT.tokenId }}
        </el-descriptions-item>
        <el-descriptions-item label="交易哈希">
          <a :href="`https://etherscan.io/tx/${mintedNFT.transactionHash}`" target="_blank">
            {{ formatHash(mintedNFT.transactionHash) }}
          </a>
        </el-descriptions-item>
      </el-descriptions>
      <el-button 
        type="success" 
        @click="$router.push('/my-collections')" 
        style="margin-top: 20px; width: 100%"
      >
        查看我的藏品
      </el-button>
    </el-card>
  </div>
</template>

<script>
import { ref, computed } from 'vue';
import { ElMessage } from 'element-plus';
import web3Service from '../services/web3Service';

export default {
  name: 'MintNFT',
  setup() {
    const form = ref({
      name: '',
      description: '',
      image: '',
      royalty: 5
    });

    const minting = ref(false);
    const mintedNFT = ref(null);

    const canMint = computed(() => {
      return form.value.name && form.value.description && form.value.image;
    });

    const formatHash = (hash) => {
      if (!hash) return '';
      return `${hash.substring(0, 10)}...${hash.substring(hash.length - 8)}`;
    };

    const handleMint = async () => {
      // 检查钱包连接
      const account = web3Service.getAccount();
      if (!account) {
        ElMessage.warning('请先连接 MetaMask 钱包');
        return;
      }

      try {
        minting.value = true;
        
        // 构建 metadata JSON
        const metadata = {
          name: form.value.name,
          description: form.value.description,
          image: form.value.image,
          creator: account, // 添加创建者地址
          attributes: [
            {
              trait_type: 'Royalty',
              value: form.value.royalty
            }
          ]
        };

        // 这里简化处理，实际应该上传到 IPFS
        // 现在直接使用 JSON 字符串作为 tokenURI
        const tokenURI = `data:application/json;base64,${btoa(JSON.stringify(metadata))}`;

        const result = await web3Service.mintNFT(tokenURI, form.value.royalty);
        
        mintedNFT.value = result;
        ElMessage.success('NFT 铸造成功!');
        
        // 重置表单
        form.value = {
          name: '',
          description: '',
          image: '',
          royalty: 5
        };
      } catch (error) {
        console.error('铸造错误:', error);
        ElMessage.error(error.message || '铸造失败');
      } finally {
        minting.value = false;
      }
    };

    return {
      form,
      minting,
      mintedNFT,
      canMint,
      formatHash,
      handleMint
    };
  }
};
</script>

<style scoped>
.mint-container {
  max-width: 800px;
  margin: 2rem auto;
  padding: 0 1rem;
}

.mint-card {
  margin-bottom: 2rem;
}

.mint-card h2 {
  margin: 0;
  color: #303133;
}

.preview-box {
  width: 100%;
  max-width: 400px;
  border: 2px solid #e4e7ed;
  border-radius: 8px;
  overflow: hidden;
}

.preview-image {
  width: 100%;
  height: auto;
  display: block;
}

.preview-placeholder {
  width: 100%;
  height: 200px;
  background: #f5f7fa;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #909399;
  border: 2px dashed #dcdfe6;
  border-radius: 8px;
}

.info-card h3 {
  margin: 0;
  color: #67c23a;
}

a {
  color: #409eff;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}
</style>

